@function line($style) {
  @if $style != '' {
    @return '-';
  } @else {
    @return '';
  }
}

$map: (none: 0, auto: auto, ii: initial, ih: inherit, xxs: 2px, xs: 5px, sm: 10px, '': 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px,
        n-xxs: -2px, n-xs: -5px, n-sm: -10px, n: -15px, n-md: 20px, n-lg: 30px, n-xl: -40px, n-xxl: -50px);

$names: (m: margin, p: padding);
@each $n-key, $n-value in $names {
  @each $style, $spacing in $map {
    $line: line($style);
    .#{$n-key}#{$line}#{$style} {
      #{$n-value}: $spacing !important;
    }
  }

  @each $style, $spacing in $map {
    $line: line($style);
    .#{$n-key}-v#{$line}#{$style} {
      #{$n-value}-top: $spacing !important;
      #{$n-value}-bottom: $spacing !important;
    }
  }

  @each $style, $spacing in $map {
    $line: line($style);
    .#{$n-key}-h#{$line}#{$style} {
      #{$n-value}-left: $spacing !important;
      #{$n-value}-right: $spacing !important;
    }
  }

  $directions: (t: top, b: bottom, l: left, r:right);
  @each $d-key, $d-value in $directions {
    @each $style, $spacing in $map {
      $line: line($style);
      .#{$n-key}-#{$d-key}#{$line}#{$style} {
        #{$n-value}-#{$d-value}: $spacing !important;
      }
    }
  }
}

$directions: (t: top, b: bottom, l: left, r:right);
@each $d-key, $d-value in $directions {
  @each $style, $spacing in $map {
    $line: line($style);
    .#{$d-key}#{$line}#{$style} {
      #{$d-value}: $spacing !important;
    }
  }
}
